<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微博发布</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .box{
            position: relative;
            margin: 50px auto;
            width: 700px;
            padding: 10px;
            border: 1px solid red;
        }
        
        .box>textarea{
            width: 700px;
            height: 100px;
            border: 1px solid #fa7d3c;
            /* 不让用户修改文本域大小 */
            resize: none;
            outline: none;
        }
        /* 文本域为空时的动画 */
        .box>.hide{
            display: none;
        }
        .box>.show{
            display: block;
            position: absolute;
            top: 11px;
            left: 11px;
            width: 700px;
            height: 100px;
            background-color: #ffdddd;
        }
        .box>button{
            float: right;
            width: 100px;
            height: 38px;
            background-color: #fbbd9e;
            color: #ffffff;
            border-radius: 4px;
            border: none;
            outline: none;
            font-size: 18px;
        }
        .box>ul{
            margin-top: 40px;
            list-style: none;
        }
        .box>ul>li{
            line-height: 30px;
            border-bottom: 1px dashed #000;
        }
        .box>ul>li>a{
            float: right;
            text-decoration: none;
         
        }
    </style>
    <script>
        window.onload = function(){
            function $(selecter){
                return document.querySelector(selecter)
            }

            // 获取button 按钮 并注册点击事件
            $('button').onclick = function(){
                var val = $('textarea').value
                if(val === ''){
                    // alert('输入内容不能为空')
                   $('#annimate').className='animate__animated animate__flash show'
                   //    600毫秒后，隐藏div
                   setTimeout(()=>{
                    $('#annimate').className='hide'
                   },600)
                    return
                }
                // 动态创建li元素
                var newLi = document.createElement('li')
                newLi.innerHTML=val +'<a href="javascript:;">删除</a>'
                // 把新创建的li放到ul的第一个位置
                $('ul').insertBefore(newLi, $('ul').firstChild)
                // 插入完成后，文本域置空
                $('textarea').value=''
                // 获取所有的a标签
                var allA = document.querySelectorAll('a')
                // 循环遍历
                allA.forEach((item)=>{
                    item.onclick=function(){
                        // 点击a标签，删除li 
                        //  this.parentNode 这句话，是拿到a的父节点 li
                        this.parentNode.remove()
                    }
                })


            }

        }
    </script>
</head>
<body>
    <div class="box">
        <textarea></textarea>
        <div id="annimate" class="hide"></div>
        <button>发布</button>
        <ul>
            <!-- <li>ddsdfdsfsdf<a href="javascript:;">删除</a></li>
            <li>ddsdfdsfsdf<a href="javascript:;">删除</a></li>
            <li>ddsdfdsfsdf<a href="javascript:;">删除</a></li>
            <li>ddsdfdsfsdf<a href="javascript:;">删除</a></li> -->
        </ul>
    </div>
</body>
</html>